<template>
	<view>
		<view class="warp">
			<view class="title">
				请填写汽车信息
			</view>
			
			<view class="content">
				<u-form :model="form" ref="uForm" label-position="top">
					<u-form-item label="品牌:" :label-style="{'font-size':'35rpx'}">
						<view class="value" @click="brand = true">
							<view v-if="form.brand_id"> {{form.brandname}}</view>
							<view v-else> 请选择品牌</view>
						</view>
					</u-form-item>
					<u-form-item label="车名:" :label-style="{'font-size':'35rpx'}">
						<u-input v-model="form.name" />
					</u-form-item>
					<u-form-item label="门店:" :label-style="{'font-size':'35rpx'}">
						<view class="value" @click="md = true">
							<view v-if="form.stoid"> {{form.stoid | formatMendian}}</view>
							<view v-else> 请选择门店</view>
						</view>
					</u-form-item>
					<u-form-item label="门店位置:" :label-style="{'font-size':'35rpx'}">
						<view class="">
							<view v-if="form.stoid == 2"> 珠海香洲</view>
							<view v-if="form.stoid == 1"> 珠海拱北</view>
						</view>
					</u-form-item>
					<u-form-item label="联系人姓名:" :label-style="{'font-size':'35rpx'}"><u-input v-model="form.contactName" /></u-form-item>
					<u-form-item label="手机号码:" :label-style="{'font-size':'35rpx'}"><u-input v-model="form.contactPhone" /></u-form-item>
					<u-form-item label="售价:" :label-style="{'font-size':'35rpx'}">
						<view class="label-item">
							<u-input v-model="form.price" />
							<p>万元</p>
						</view>
					</u-form-item>
					<u-form-item label="车龄:" :label-style="{'font-size':'35rpx'}">
						<view class="label-item">
							<u-input v-model="form.carAge" />
							<p>年</p>
						</view>
					</u-form-item>
					<u-form-item label="公里数:" :label-style="{'font-size':'35rpx'}">
						<view class="label-item">
							<u-input v-model="form.kilometers" />
							<p>万公里</p>
						</view>
					</u-form-item>
					<u-form-item label="上牌时间:" :label-style="{'font-size':'35rpx'}">
						<view class="value" @click="spTime = true">
							<view v-if="form.registrationTime"> {{form.registrationTime}}</view>
							<view v-else> 请选择初次上牌日期</view>
						</view>
					</u-form-item>
					<u-form-item label="车身结构:" :label-style="{'font-size':'35rpx'}">
						<view class="value" @click="carStructure = true">
							<view v-if="form.structure"> {{form.structure}}</view>
							<view v-else> 请选择车身结构</view>
						</view>
					</u-form-item>
					<u-form-item label="变速箱:" :label-style="{'font-size':'35rpx'}">
						<view class="value" @click="carGearbox = true">
							<view v-if="form.gearbox"> {{form.gearbox}}</view>
							<view v-else> 请选择变速箱</view>
						</view>
					</u-form-item>
					<u-form-item label="排放:" :label-style="{'font-size':'35rpx'}">
						<view class="value" @click="carEmission = true">
							<view v-if="form.emission"> {{form.emission}}</view>
							<view v-else> 请选择变排放</view>
						</view>
					</u-form-item>
					<u-form-item label="排量:" :label-style="{'font-size':'35rpx'}"><u-input v-model="form.displacement" /></u-form-item>
					<u-form-item label="燃料类型:" :label-style="{'font-size':'35rpx'}">
						<view class="value" @click="carFuel = true">
							<view v-if="form.fuel"> {{form.fuel}}</view>
							<view v-else> 请选择燃料类型</view>
						</view>
					</u-form-item>
					<u-form-item label="座位:" :label-style="{'font-size':'35rpx'}">
						<view class="value" @click="carSeat = true">
							<view v-if="form.seat"> {{form.seat}}</view>
							<view v-else> 请选择座位</view>
						</view>
					</u-form-item>
					<u-form-item label="车辆颜色:" :label-style="{'font-size':'35rpx'}">
						<view class="label-item">
							<u-input v-model="form.color" />
							<p>色</p>
						</view>
						
					</u-form-item>
					<u-form-item label="配置亮点:" :label-style="{'font-size':'35rpx'}"><u-input v-model="form.highLights" /></u-form-item>
				</u-form>
				
				<view class="image">
					<view class="image-top">
						<view class="top-title">
							首图
						</view>
						<view class="top-tishi">
							（禁止上传不良图片,上传照片最多1张）
						</view>
						<view class="top-content">
							<u-upload
								ref="uUpload"
								:action="action"
								:auto-upload="true"
								max-count="1"
								name="image"
								size-type="['compressed']"
								max-size="3145728"
								@on-change="getImage"
								>
							</u-upload>
						</view>
					</view>
					<view class="image-bottom">
						<view class="bottom-title">
							展示图
						</view>
						<view class="bottom-tishi">
							（禁止上传不良图片,上传照片最多6张）
						</view>
						<view class="bottom-content">
							<u-upload
								ref="uUploadList"
								:action="action"
								:auto-upload="true"
								max-count="6"
								name="image"
								size-type="['compressed']"
								max-size="3145728"
								@on-change="getImagelist"
								>
							</u-upload>
						</view>
					</view>
				</view>
				
				<view class="">
					<u-button type="primary" @click="submit">提交审核</u-button>
				</view>
				
			</view>
		</view>
		
		<!-- 品牌选择器 -->
		<u-select v-model="brand" :list="brandList" @confirm="confirmbrand"></u-select>
		<!-- 门店选择器 -->
		<u-select v-model="md" mode="single-column" :list="mendianList" @confirm="confirmMd"></u-select>
		<!-- 上牌时间选择器 -->
		<u-picker v-model="spTime" mode="time" :params="params" @confirm="confirmDate"></u-picker>
		<!-- 车身结构选择器 -->
		<u-select v-model="carStructure" :list="structureList" @confirm="confirmSt"></u-select>
		<!-- 变速箱选择器 -->
		<u-select v-model="carGearbox" :list="gearboxList" @confirm="confirmGb"></u-select>
		<!-- 排放选择器 -->
		<u-select v-model="carEmission" :list="emissionList" @confirm="confirmEm"></u-select>
		<!-- 燃料类型选择器 -->
		<u-select v-model="carFuel" :list="fuelList" @confirm="confirmFu"></u-select>
		<!-- 座位选择器 -->
		<u-select v-model="carSeat" :list="seatList" @confirm="confirmSe"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					brand: '',//品牌
					brandid: 0,//品牌id
					depart: '',//系别
					nickname: '',//联系人姓名
					mobile: '',//手机号码
					free: '',//售价
					carAge: '',//车龄
					kilometers: '',//公里数
					registrationTime: '',//上牌时间
					structure: '',//车身结构
					emission: '',//排放
					displacement: '',//排量
					gearbox: '',//变速箱
					fuel: '',//燃料类型
					seat: '',//座位
					color: '',//车辆颜色
					highLights: '',//配置亮点
				},
				userInfo: [],
				brand: false,
				md: false,
				spTime: false,
				carStructure: false,
				carGearbox: false,
				carEmission: false,
				carFuel: false,
				carSeat: false,
				mendian: '',//门店
				mendianId: '',//门店id
				action: 'https://adjyxw.h1668.com/home/product/Product/upload',
				carIndeximg: '',
				imgListOne: '',
				imgListTow: '',
				imgListThree: '',
				imgListFour: '',
				imgListFive: '',
				imgListSix: '',
				mendianList: [
					{
						value: '1',
						label: '拱北店'
					},
					{
						value: '2',
						label: '香洲店'
					}			
				],
				brandList: [
					{
						value: '1',
						label: '奥迪'
					},
					{
						value: '2',
						label: '兰博基尼'
					},
					{
						value: '3',
						label: '凯迪拉克'
					},
					{
						value: '4',
						label: '劳斯莱斯'
					},
					{
						value: '5',
						label: '帕加尼'
					},
					{
						value: '6',
						label: '丰田'
					},
					{
						value: '8',
						label: '玛莎拉蒂'
					},
					{
						value: '9',
						label: '红旗'
					},
					{
						value: '10',
						label: '本田'
					},
					{
						value: '48',
						label: '别克'
					},
					{
						value: '49',
						label: '雪佛兰'
					}
				],
				//上牌时间选择器日期只显示年，月，日3个参数
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				structureList: [
					{
						value: '1',
						label: '客车'
					},
					{
						value: '2',
						label: '货车'
					},
					{
						value: '3',
						label: '两厢车'
					},
					{
						value: '4',
						label: '三厢车'
					},
				],
				gearboxList: [
					{
						value: '1',
						label: '自动挡'
					},
					{
						value: '2',
						label: '手动挡'
					},
				],
				emissionList: [
					{
						value: '1',
						label: '国一'
					},
					{
						value: '2',
						label: '国二'
					},
					{
						value: '3',
						label: '国三'
					},
					{
						value: '4',
						label: '国四'
					},
					{
						value: '5',
						label: '国五'
					},
					{
						value: '6',
						label: '国六'
					},
					{
						value: '7',
						label: '欧一'
					},
					{
						value: '8',
						label: '欧二'
					},
					{
						value: '9',
						label: '欧三'
					},
					{
						value: '10',
						label: '欧四'
					},
					{
						value: '11',
						label: '欧五'
					},
					{
						value: '12',
						label: '欧六'
					}
				],
				fuelList: [
					{
						value: '1',
						label: '汽油'
					},
					{
						value: '2',
						label: '柴油'
					},
					{
						value: '3',
						label: '油电混合'
					},
					{
						value: '4',
						label: '增程式'
					}
				],
				seatList: [
					{
						value: '1',
						label: '2座'
					},
					{
						value: '2',
						label: '4座'
					},
					{
						value: '3',
						label: '5座'
					},
					{
						value: '4',
						label: '6座'
					}
				],
				carId: 0,
			}
		},
		onLoad(item) {
			this.carId = item.id
			this.getCarInfo()
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userData');
		},
		methods: {
			//提交按钮
			submit() {
				if(this.form.brand == '') {
					uni.$u.toast('请选择车辆品牌')
				}else if(this.form.depart == ''){
					uni.$u.toast('请填写车辆系别')
				}else if(this.mendian == ''){
					uni.$u.toast('请选择门店')
				}else if(this.form.nickname == ''){
					uni.$u.toast('请填写联系人姓名')
				}else if(this.form.mobile == ''){
					uni.$u.toast('请填写手机号码')
				}else if(this.form.free == ''){
					uni.$u.toast('请填写车辆售价')
				}else if(this.form.carAge == ''){
					uni.$u.toast('请填写车龄')
				}else if(this.form.kilometers == ''){
					uni.$u.toast('请填写车辆公里数')
				}else if(this.form.registrationTime == ''){
					uni.$u.toast('请选择车辆上牌时间')
				}else if(this.form.structure == ''){
					uni.$u.toast('请选择车身结构')
				}else if(this.form.emission == ''){
					uni.$u.toast('请选择车辆排放')
				}else if(this.form.displacement == ''){
					uni.$u.toast('请填写车辆排量')
				}else if(this.form.gearbox == ''){
					uni.$u.toast('请选择车辆变速箱')
				}else if(this.form.fuel == ''){
					uni.$u.toast('请选择车辆燃料类型')
				}else if(this.form.seat == ''){
					uni.$u.toast('请选择车辆座位')
				}else if(this.form.color == ''){
					uni.$u.toast('请填写车辆颜色')
				}else if(this.form.highLights == ''){
					uni.$u.toast('请填写车辆配置亮点')
				}else if(this.carIndeximg == '') {
					uni.$u.toast('请上传车辆封面图')
				}else if(this.imgListOne == '') {
					uni.$u.toast('请上传最少一张车辆展示图')
				}else{
					this.postMessage()
				}
			},
			//post信息给后端
			postMessage() {
				uni.request({
					url: uni.getStorageSync('URL') + '/first/depot/depot/apply',
					method: 'POST',
					data: {
						busid: this.userInfo.id,//用户id
						brand: this.form.brandid,
						depart: this.form.depart,
						stoid: this.mendianId,
						nickname: this.form.nickname,
						mobile: this.form.mobile,
						price: this.form.free,
						carAge: this.form.carAge,
						kilometers: this.form.kilometers,
						registrationTime: this.form.registrationTime,
						structure: this.form.structure,
						emission: this.form.emission,
						displacement: this.form.displacement,
						gearbox: this.form.gearbox,
						fuel: this.form.fuel,
						seat: this.form.seat,
						color: this.form.color,
						highLights: this.form.highLights,
						thumb: this.carIndeximg,
						imgone: this.imgListOne,
						imgtow: this.imgListTow,
						imgthree: this.imgListThree,
						imgfour: this.imgListFour,
						imgfive: this.imgListFive,
						imgsix: this.imgListSix
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 1){
							uni.$u.toast('提交成功，请耐心等待审核')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pagesC/releaseCar/releaseRecords'
								})
							}, 1500)
						}else {
							uni.showToast({
								icon: 'none',
								title: '提交失败',
								duration: 2000,
							});
						}
					}
				})
			},
			getCarInfo() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/booking/Cardserver/releaseCarinfo',
					method: 'GET',
					data: {
						id: this.carId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.form = res.data.data[0]
					},
				})
			},
			clearList() {
				
			},
			//获取展示图列表路径
			getImagelist() {
				let https = 'https://adjyxw.h1668.com/';
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUploadList.lists.filter(val => {
					return val.progress == 100;
				})
				console.log(files)
				if(files.length == 1){
					this.imgListOne = https + files[0].response.result
					this.imgListTow = ''
					this.imgListThree = ''
					this.imgListFour = ''
					this.imgListFive = ''
					this.imgListSix = ''
				}else if(files.length == 2){
					this.imgListOne = https + files[0].response.result
					this.imgListTow = https + files[1].response.result
					this.imgListThree = ''
					this.imgListFour = ''
					this.imgListFive = ''
					this.imgListSix = ''
				}else if(files.length == 3){
					this.imgListOne = https + files[0].response.result
					this.imgListTow = https + files[1].response.result
					this.imgListThree = https + files[2].response.result
					this.imgListFour = ''
					this.imgListFive = ''
					this.imgListSix = ''
				}else if(files.length == 4){
					this.imgListOne = https + files[0].response.result
					this.imgListTow = https + files[1].response.result
					this.imgListThree = https + files[2].response.result
					this.imgListFour = https + files[3].response.result
					this.imgListFive = ''
					this.imgListSix = ''
				}else if(files.length == 5){
					this.imgListOne = https + files[0].response.result
					this.imgListTow = https + files[1].response.result
					this.imgListThree = https + files[2].response.result
					this.imgListFour = https + files[3].response.result
					this.imgListFive = https + files[4].response.result
					this.imgListSix = ''
				}else if(files.length == 6){
					this.imgListOne = https + files[0].response.result
					this.imgListTow = https + files[1].response.result
					this.imgListThree = https + files[2].response.result
					this.imgListFour = https + files[3].response.result
					this.imgListFive = https + files[4].response.result
					this.imgListSix = https + files[5].response.result
				}
				console.log(this.imgListOne)
				console.log(this.imgListTow)
				console.log(this.imgListThree)
				console.log(this.imgListFour)
				console.log(this.imgListFive)
				console.log(this.imgListSix)
			},
			//获取首图上传后的路径
			getImage() {
				let https = 'https://adjyxw.h1668.com/';
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				this.carIndeximg = https + files[0].response.result
				console.log(1,this.carIndeximg)
			},
			//座位选择
			confirmSe(e) {
				this.form.seat = e[0].label
			},
			//燃料类型选择
			confirmFu(e) {
				this.form.fuel = e[0].label
			},
			//变排放选择
			confirmEm(e) {
				this.form.emission = e[0].label
			},
			//变速箱选择
			confirmGb(e) {
				this.form.gearbox = e[0].label
			},
			//车身结构选择
			confirmSt(e) {
				this.form.structure = e[0].label
			},
			//上牌时间选择
			confirmDate(e) {
				this.form.registrationTime = e.year + '-' + e.month + '-' + e.day
			},
			//品牌选择
			confirmbrand(e) {
				this.form.brand = e[0].label
				this.form.brandid = e[0].value
			},
			//门店选择
			confirmMd(e) {
				this.mendian = e[0].value
				this.mendianId = e[0].value
			},
		},
		filters: {
			formatMendian: function(str) {// 格式化科室
				const mendian = {
					"1": "拱北店",
					"2": "香洲店",
					"0": "无"
				}
				return mendian[str];
			},
		}
	}
</script>

<style lang="scss">
.warp{
	padding: 30rpx;
	.title{
		margin: 0 auto;
		text-align: center;
		font-size: 30rpx;
	}
	.content{
		.value{
			font-size: 30rpx;
		}
	}
}
.image{
	.image-top, .bottom-title {
		font-size: 35rpx;
	}
	.top-tishi, .bottom-tishi {
		font-size: 25rpx;
	}
}
.label-item {
	display: flex;
	justify-content: space-between;
}
</style>
